<template>

  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="品牌">
              <a-select
                style="width: 180px"
                placeholder="请选择品牌"
                @change="selectChange"
                v-model="brand"
                allow-clear
              >
                <a-select-option
                  :value="item"
                  v-for="(item,index) in brandList"
                  :key="index"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="字段">
              <a-select
                style="width: 190px"
                placeholder="请选择字段"
                @change="fieldChange"
                v-model="field"
                allow-clear
              >
                <a-select-option
                  :value="item"
                  v-for="(item,index) in fieldList"
                  :key="index"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :pagination="false"
        :loading="loading"
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: true }"
      >
        <template
          slot="main"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.mainPage==1"
              @change="choose(record, $event ? ischoose : noChoose,1)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
        <template
          slot="detail"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.detailPage==1"
              @change="choose(record, $event ? ischoose : noChoose,2)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
        <template
          slot="print"
          slot-scope="txt, record"
        >
          <div style="text-align: center;">
            <a-switch
              :default-checked="record.printPage==1"
              @change="choose(record, $event ? ischoose : noChoose,3)"
            >
              <a-icon
                slot="checkedChildren"
                type="check"
              />
              <a-icon
                slot="unCheckedChildren"
                type="close"
              />
            </a-switch>
          </div>
        </template>
      </a-table>
      <!-- <div class="button">
        <a-button
          type="primary"
          @click="update"
          style="margin-right:10px"
        >
          保存
        </a-button>
      </div> -->
    </a-card>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
const columns = [
  {
      title: '品牌',
    dataIndex: 'brand',
  },
  {
    title: '字段',
    dataIndex: 'field',
  },
  {
    title: '字段名称',
    dataIndex: 'fieldName',
  },
  {
    title: '是否主页显示',
    dataIndex: 'mainPage',
    scopedSlots: { customRender: 'main' },
  },
  {
    title: '是否详情页显示',
    dataIndex: 'detailPage',
    scopedSlots: { customRender: 'detail' },
  },
  {
    title: '是否打印页显示',
    dataIndex: 'printPage',
    scopedSlots: { customRender: 'print' },
  },
]

export default {
  data() {
    return {
      columns,
      dataList: [],
      loading: false,
      brand: '',
      brandList: [],
      field: '',
      fieldList: [],
      form: this.$form.createForm(this),
      urlKey: 'config/product/field',
      patt: 'api/gateway/basemgt-op/',
      ischoose: 1,
      noChoose: 0,
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    },
  },
  mounted() {
    this.getBrandList()
    this.getFieldList()
    this.loadData()
  },

  methods: {
    getFieldList() {
      this.$http({
        url: '/api/gateway/basemgt-op/config/product/field/filterValue',
        method: 'get',
      }).then((data) => {
        if (data.code == 200) {
          this.fieldList = data.data
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
    getBrandList() {
      this.$http({
        url: '/api/gateway/basemgt-op/account/brand?jobNumber=' + this.jobNumber,
        method: 'get',
        data: {
          jobNumber: this.jobNumber,
        },
      }).then((data) => {
        if (data.code == 200) {
          this.brandList = data.data
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
    fieldChange(field) {
      this.field = field
    },
    selectChange(brand) {
      this.brand = brand
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData()
    },
    loadData() {
      this.dataList=[ ]
      this.loading = true
      const params = {}
      if(this.brand != ''){
        params.brand = this.brand
      }
      if(this.field != ''){
        params.fieldName = this.field
      }    
     try {
       postAction(`${this.patt}${this.urlKey}/list`, params).then((data) => {
        if (data.code == 200) {
          this.dataList = data.data
          console.log(this.dataList);
        } else {
          this.$message.warning(data.msg)
        }
        
      })
     } catch (error) {
      
     }finally{
      this.loading = false
     }
    },
    choose(record, type, operation) {
      if (operation == 1) {
        this.dataList.map((item) => {
          if (item.id == record.id) {
            item.mainPage = type
            return
          }
        })
      }
      if (operation == 2) {
        this.dataList.map((item) => {
          if (item.id == record.id) {
            item.detailPage = type
            return
          }
        })
      }
      if (operation == 3) {
        this.dataList.map((item) => {
          if (item.id == record.id) {
            item.printPage = type
            return
          }
        })
      }
      this.update()
    },
    update() {
      const params = {
        fieldList: this.dataList,
      }
      postAction(`${this.patt}${this.urlKey}/update`, params).then((data) => {
        if (data.code == 200) {
          this.$message.success(data.msg)
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.button {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>